<template>
    <div>
        <a-card class="card-demo" :style="{ width: '98%' }">
            <span>上传图片：</span>

            <a-space direction="vertical" :style="{ width: '100%' }">
                <a-upload
                    action="/"
                    :fileList="file ? [file] : []"
                    :show-file-list="false"
                    @change="onChange"
                    @progress="onProgress"
                >
                    <template #upload-button>
                        <div
                            :class="`arco-upload-list-item${
                                file && file.status === 'error'
                                    ? ' arco-upload-list-item-error'
                                    : ''
                            }`"
                        >
                            <div
                                class="arco-upload-list-picture custom-upload-avatar"
                                v-if="file && file.url"
                            >
                                <img :src="file.url" />
                                <div class="arco-upload-list-picture-mask">
                                    <IconEdit />
                                </div>
                                <a-progress
                                    v-if="
                                        file.status === 'uploading' &&
                                        file.percent < 100
                                    "
                                    :percent="file.percent"
                                    type="circle"
                                    size="mini"
                                    :style="{
                                        position: 'absolute',
                                        left: '50%',
                                        top: '50%',
                                        transform:
                                            'translateX(-50%) translateY(-50%)',
                                    }"
                                />
                            </div>
                            <div class="arco-upload-picture-card" v-else>
                                <div class="arco-upload-picture-card-text">
                                    <IconPlus />
                                    <div
                                        style="
                                            margin-top: 10px;
                                            font-weight: 600;
                                        "
                                    ></div>
                                    选择图片
                                </div>
                            </div>
                        </div>
                    </template>
                </a-upload>
            </a-space>

            <a-form
                :model="form"
                :style="{ width: '400px', marginTop: '40px' }"
                auto-label-width
                @submit="handleSubmit"
            >
                <a-form-item field="name" label="人员姓名：">
                    <a-input
                        v-model="form.name"
                        placeholder="please enter your username..."
                    />
                </a-form-item>
                <a-form-item field="post" label="人员职务：">
                    <a-input
                        v-model="form.post"
                        placeholder="please enter your post..."
                    />
                </a-form-item>

                <a-form-item field="post" label="人员简介：">
                    <a-textarea
                        v-model="form.content"
                        :auto-size="{
                            minRows: 5,
                            maxRows: 5,
                        }"
                        :style="{ width: '600px' }"
                        placeholder="Please enter something"
                        allow-clear
                    />
                </a-form-item>
            </a-form>
        </a-card>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

import { IconPlus, IconEdit } from '@arco-design/web-vue/es/icon'

//图片区域
const file = ref()
const onChange = (_: any, currentFile: any) => {
    file.value = {
        ...currentFile,
        // url: URL.createObjectURL(currentFile.file),
    }
}
const onProgress = (currentFile: any) => {
    file.value = currentFile
}

//表单

const form = reactive({
    name: '',
    post: '',
    content: '',
    // isRead: false,
})
const handleSubmit = (data: any) => {
    console.log(data)
}
</script>

<style lang="scss" scoped>
.card-demo {
    width: 360px;
    margin-left: 24px;
    transition-property: all;
}

.card-demo:hover {
    transform: translateY(-4px);
}
</style>
